Links
Basic Links
Basic Link
Save and ContinueInternal Navigation
NextHTML
<h3>Basic Link</h3>
<a href="#">Save and Continue</a>
<h3>Internal Navigation</h3>
<a class="int-nav" href="#">Next</a>
Problem Being Solved
A developer needs to link to a section on a page or to navigate to another page.
When to Use
Use a link if you're navigating somewhere (a different point on a page or a new page).
When Not to Use
Do not use a link if a button should be used instead (or vice versa) — a link navigates you to a place, a button does something (submits a form, opens a modal, etc...).
Formatting
- Links always have an underline.
- NEVER use target="_blank" to open a new page with anchor links due to accessiblity issues.
State Aware Links
Loading
Loaded
Expired
Download X MB Download link has expired. Reload this page to access file.Unauthorized
Download X MB You must log in to access this file.HTML
<h3>Loading</h3>
<div class="deferred">
<a href="#" disabled="">Download</a>
<span class="loading--dots"></span>
</div>
<h3>Loaded</h3>
<div class="deferred">
<a href="#" class="loaded">Download</a>
<span class="annotation">X MB</span>
<span class="info">Download link will expire in X minutes.</span>
</div>
<h3>Expired</h3>
<span class="deferred">
<a href="#" disabled="">Download</a>
<span class="annotation">X MB</span>
<span class="info">Download link has expired. <a href="javascript:window.location.reload()">Reload</a> this page to access file.</span>
</span>
<h3>Unauthorized</h3>
<span class="deferred">
<a href="#" disabled="">Download</a>
<span class="annotation">X MB</span>
<span class="info">You must <a href="#">log in</a> to access this file.</span>
</span>
Problem Being Solved
We need a way to indicate to users that a link has a client-side state. This includes loading / expired / login required.
When to Use
Stateful links should be used when the associated href is populated after page load, the href target has an expiration date, and/or when the target requires login and it is desireable to show the link details to users.
When Not to Use
When a links href target is known at page generation, the target does not expire, and/or the link does not depend on user login status.